<template>
	<view class="container">
		<view class="titlename">{{titlename()}}</view>
		<view class="data-bg" v-for="(item,idx) in datalist" :key="idx">
			<uni-row>
				
				<uni-col :span="6">
					<view class="name">
						<view>{{item.name}}</view>
					</view>
				</uni-col>
				<uni-col :span="15">
					<view class="jindu" :style="'width:'+(item.val/datamax)*100+'%'">
					</view>
				</uni-col>
				
				<uni-col :span="3">
					<view class="val" >
						<view>{{item.val}}</view>
					</view>
				</uni-col>
				
			</uni-row>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据最大值
				datamax:10,
				 // 数据列表
				datalist: [{
					name: '名称1',
					val: 10
				}, {
					name: '名称2',
					val: 8
				}, {
					name: '名称3',
					val: 5
				}],
				typ: 0
			}
		},
		onLoad(params) {
			this.typ = params.typ
			let detail = JSON.parse(params.detail || '{}')
			console.log('detail', detail)
			let max = 0
			this.datalist = []
			for (let uid in detail) {
				if (detail[uid].typ == 6) {
					detail[uid].val /= 8
				}

				if (detail[uid].val > max) max = detail[uid].val
				this.datalist.push(detail[uid])
			}
			this.datamax = max
		},
		methods: {
			titlename() {
				let typ = this.typ
				if (typ == 1) {
					return '上班未打卡'
				}
				if (typ == 2) {
					return '下班未打卡'
				}
				if (typ == 3) {
					return '迟到次数'
				}
				if (typ == 4) {
					return '早退次数'
				}
				if (typ == 5) {
					return '外勤次数'
				}
				if (typ == 6) {
					return '请假天数'
				}
				if (typ == 7) {
					return '出差天数'
				}
				if (typ == 8) {
					return '加班次数'
				}
				if (typ == 9) {
					return '加班时长'
				}
				if (typ == 10) {
					return '补卡次数'
				}

			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/common.scss';
	.container {
		padding: 20px;
		height: 100vh;
		background: $pagejianbianBg;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.titlename {
		font-size: 17px;
		font-weight: bold;
		padding-bottom: 20px;
		color: darkcyan;
	}
	.data-bg {
		background-color: white;
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		margin-bottom: 2px;
		padding: 5px ;
		font-size: 16px;
		
	}
	.name{
		text-align: center;
		font-weight: bold;
	}
	.jindu{
		background-color: $themeColor;
		border-radius: 5px;
		height: 20px;
	}
	.val{
		text-align: center;
	}
	

</style>
